<template>
    <div class="login">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
            <h1>登录页面</h1>
            <CommonLogin />
            <!-- <MessageLogin /> -->
            <!-- <Codelogin /> -->
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>
<script>
import Codelogin from "./codelogin.vue";
import CommonLogin from "./commonLogin.vue";
import MessageLogin from "./messageLogin.vue";
var validateusername = (rule, value, callback) => {
    console.log(value);
    let reg = /^[a-zA-Z0-9_-]{3,12}$/;
    if (reg.test(value)) {
        callback();
    }
    else {
        callback("只能是3~12位英文字母，数字，下划线或者短横线");
    }
};
var validatepassword = (rule, value, callback) => {
    if (value) {
        callback();
    }
    else {
        callback("密码不能为空");
    }
};
var validatecheck = (rule, value, callback) => {
    if (value) {
        callback();
    }
    else {
        callback("验证码不能为空");
    }
};
export default {
    data() {

        return {
            ruleForm: {
                username: "",
                password: "",
                check: ""
            },
            rules: {
                username: [
                    { validator: validateusername, trigger: "blur" }
                ],
                password: [
                    { validator: validatepassword, trigger: "blur" }
                ],
                check: [
                    { validator: validatecheck, trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("登录成功！");
                }
                else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    },
    components: { CommonLogin, MessageLogin, Codelogin }
}
</script>
<style lang="less" scoped>
.el-form {
    width: 400px;
    text-align: center;

}

.login {
    width: 500px;
    background-color: aqua;
    display: flex;
    justify-content: center;
}

.el-button {
    text-align: center;
}
</style>